import React from 'react'
import {
  Route,
  Routes,
  NavLink,
  Navigate,
  useNavigate,
  useRoutes,
} from 'react-router-dom'
const Home = React.lazy(() => import('./pages/Home'))
const About = React.lazy(() => import('./pages/About'))
const News = React.lazy(() => import('./pages/News'))
const Message = React.lazy(() => import('./pages/Message'))
const Test = React.lazy(() => import('./pages/Test'))
export default function App() {
  const navigate = useNavigate()
  return (
    <div>
      App
      <br />
      <NavLink
        to="/home"
        style={({ isActive }) => {
          return isActive ? { color: '#fff', backgroundColor: 'pink' } : {}
        }}
      >
        home
      </NavLink>
      <NavLink
        to="/about"
        className={({ isActive }) => {
          return isActive ? 'select' : ''
        }}
      >
        about
      </NavLink>
      <button
        onClick={() => {
          navigate('/about/1/10?name=zs&age=18', {
            // replace: true,
            state: '哈哈',
          })
        }}
      >
        点击展示about
      </button>
      <hr />
      {/* <Routes>
        <Route path="/" element={<Home></Home>}></Route>
        <Route path="/home" element={<Home></Home>}> */}
      {/* 直接在Route的子节点定义的Route表示嵌套的路由规则 */}
      {/* <Route path="news" element={<News></News>}></Route>
          <Route path="message" element={<Message></Message>}></Route>
        </Route>
        <Route path="/about/:page/:pageSize" element={<About></About>}></Route>
        <Route path="/xxx">
          <Route path="yyy" element={<Test></Test>}></Route>
        </Route>
      </Routes> */}
      {useRoutes([
        {
          path: '/',
          element: <Home></Home>,
        },
        {
          path: '/home',
          element: <Home></Home>,
          children: [
            {
              path: 'news',
              element: <News></News>,
            },
            {
              path: 'message',
              element: <Message></Message>,
            },
          ],
        },
        {
          path: '/about/:page/:pageSize',
          element: <About></About>,
        },
        {
          path: '/xxx',
          children: [
            {
              path: 'yyy',
              element: <Test></Test>,
            },
          ],
        },
      ])}
    </div>
  )
}
